<template>
  <div class="container-fluid p-0">
    <div class="container-xxl p-0" ref="bigbox">
      <div class="layout" ref="scroll">
        <div v-for="(item, index) in typeDate" :key="item.id" class="img-content">
          <img src="../common/img/infoType/product_01.png" alt="">
          <p class="fs-4 fw-bold">{{ item.type_name }}</p>

          <div class="hover-text">
            <span>{{ item.type_name }}</span>
            <div class="content">
              <div v-for="childs in item.child">{{ childs.type_name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="arrow arrow-l">
      <i @click="next" class="bi bi-caret-left-square-fill" style="font-size: 2.8rem; color: wheat;"></i>
    </div>
    <div class="arrow arrow-r">
      <i @click="prev" class="bi bi-caret-right-square-fill" style="font-size: 2.8rem; color: wheat;"></i>
    </div>
  </div>


</template>

<script setup lang="ts">
import { apiReau } from '@/apis/caes'
import { nextTick, onMounted, ref } from 'vue';
// const typeDate: any = ref([])
defineProps(['typeDate'])
// onMounted(() => {
//   get_date()
// })
// const get_date = async () => {
//   let res: any = await apiReau()
//   typeDate.value = res.type
// }


const bigbox = ref()
const scroll = ref()
let x = 0
const prev = () => {
  if ((scroll.value.clientWidth + x) <= bigbox.value.clientWidth) return false
  scroll.value.style.transform = `translateX(${x -= 80}px)`
}
const next = () => {
  if (x < 0) scroll.value.style.transform = `translateX(${x += 80}px)`
}
</script>

<style scoped lang="scss">
.container-fluid {
  position: relative;

  .arrow {
    position: absolute;
    z-index: 9;
    top: 55%;
  }

  .arrow-r {
    right: 0%;
    // background-color: blueviolet;
  }
}

.container-xxl {
  height: 480px;
  // background-color: rgb(0, 191, 255);
  overflow: hidden;

  .layout {
    height: 100%;
    width: 254*7+12*14px;
    // background-color: red;
    transition: transform .5s;

    display: flex;
    align-items: flex-end;

    .img-content {
      position: relative;
      margin: 0 12px;
      height: 380px;
      width: 251px;
      transition: display, 3s, height .4s ease, transform .2s;

      >p {
        position: absolute;
        bottom: .1%;
        left: 5%;
        color: white;
        display: block;
      }

      img {
        height: 100%;
        width: 100%;
      }

      &:hover {
        height: 470px;

        >p {
          display: none;
        }

        .hover-text {
          display: block;
        }
      }

      &:nth-child(1) {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 24px;
      }
    }

    .hover-text {
      position: absolute;
      top: 12%;
      left: 0;

      display: flex;
      flex-direction: column;
      color: white;
      font-weight: 600;
      display: none;

      span {
        margin-left: 20px;
        font-size: 24px;
      }

      .content {
        // background-color: blue;
        width: 98%;
        margin: 90px 5%;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 165px;

        >div {
          height: 46px;
          width: 10em;
          margin-top: 5px;
          border: 1px solid white;
          font-size: 20px;
          line-height: 46px;
          text-align: center;

          &:hover {
            background-color: aliceblue;
            color: black;
          }
        }
      }

    }

  }
}
</style>